<template>
    <div id="myLogin">
        <div class="about" id="mydiv">
            <h2>海底捞鱼餐饮管理系统</h2>
            <div><img src="../assets/images/dian5.jpg" alt=""></div>
            <div id="user">
                <label for="acc" class="lab"><span class="iconfont icon-yuangong1"></span></label>
                <input id="acc" class="acc" type="text" placeholder="请输入账号" v-model="user">
            </div>
            <div id="pwd">
                <label for="pas" class="lab"><span class="iconfont icon-suocopy"></span></label>
                <input id="pas" class="acc" type="password" placeholder="请输入密码" v-model="pwd">
            </div>
            <button @click="loginCom" id="denglu">登 录</button>
            <div id="errormessage"></div>

        </div>
    </div>
</template>
<script>
    import {mapActions} from 'vuex'

    export default {
        name: 'Login',
        data() {
            return {
                user: '',
                pwd: ''
            }
        },
        methods: {
            ...mapActions(['toLogin', 'loginOut']),//将action的login和loginout导出到methods里面
            loginCom() {
                if (this.user && this.pwd) {
                    let user = {
                        username: this.user,
                        password: this.pwd
                    };
                    // 发起登录
                    this.toLogin(user).then(res => {
                        if (res === 200) {
                            this.$message({
                                message: '登录成功！',
                                type: 'success'
                            });
                            this.$router.push('/index');
                        }
                        else {
                            if (res === 400) {
                                this.$message({
                                    message: '账号密码不匹配！',
                                    type: 'warning'
                                });
                            } else {
                                this.$message({
                                    message: '登录出错！',
                                    type: 'warning'
                                });
                            }
                        }
                    })
                } else {
                    this.$message({
                        message: '账号与密码不能为空！',
                        type: 'warning'
                    });
                    return false;
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    * {
        margin: 0;
        padding: 0;
    }

    #myLogin {
        width: 100%;
        height: 100%;
        background-image: url("../assets/images/02.png");
        /*background-position-y: bottom;*/
        background-repeat: no-repeat;
        /*background-size: 100% 100%;*/
        background-size: cover;
    }

    #mydiv {
        margin: 0 auto;
        width: 400px;
        height: 400px;
        background-color: rgba(0, 0, 0, 0.72);
        position: relative;
        top: 125px;
        text-align: center;
        overflow: hidden;
    }

    #mydiv > h2 {
        margin: 20px 0;
        color: white;
        font-family: Ebrima, serif;
    }

    #mydiv img {
        width: 100px;
    }

    #user {
        width: 250px;
        border-radius: 5px;
        margin: 20px auto;
        background-color: white;
    }

    #pwd {
        width: 250px;
        border-radius: 5px;
        margin: 20px auto;
        background-color: white;
    }

    .lab {
        color: #2aabd2;
        margin: 0 10px;
        width: 400px;
        background-color: white;
        height: 30px;
        line-height: 30px;
    }

    .acc {
        outline: none;
        border: none;
        height: 30px;
        /*margin-left: .1rem;*/
        width: 210px;
    }

    input::-webkit-input-placeholder, .inputHead {
        color: gainsboro;
    }

    #denglu {
        outline: none;
        width: 250px;
        height: 35px;
        border: 1px solid #2aabd2;
        border-radius: 10px;
        line-height: 30px;
        color: white;
        background-color: #2aabd2;
        cursor: pointer;
    }

    #errormessage {
        position: absolute;
        left: 125px;
        top: 340px;
        color: red;
    }

</style>
